<template>
  <div class="ljwk">
    <Dashboard title="炉窑温控系统" :letter-spacing="'0.6em'" >
        <div class="panel-content`">
          <Svg3d style="margin-top: -66px;" :data="initTemperatureData"></Svg3d>
    
        </div>
        
    </Dashboard>
  </div>
</template>
<script setup>
import Dashboard from "@/views/Dashboard/index.vue";
import { ref,watch} from "vue";
import {useTemperature} from "@/utils/useTemperature";
import {useWebSocket} from "@/utils/useWebSocket";
import Svg3d from '@/views/components/Svg3d.vue'
const {initTemperatureData} = useTemperature();
const { temperatureData } = useWebSocket();

watch(temperatureData, (newVal) => {
  console.log('%c [ newVal ]-28', 'font-size:18px; background:#2d01bc; color:#7145ff;', newVal)
  console.log(
    "%c [ temperatureData更新了 ]-53",
    "font-size:18px; background:#cdd104; color:#ffff48;",
    newVal
  );
  
  initTemperatureData.value = newVal;
},  { deep: true })


</script>
<style scoped lang="scss">
.ljwk {
    width: 100%;
  height: 100%;
  background-color: #012052;
}
.panel-content {
  padding: 16px;
  color: #fff;
  box-sizing: border-box; /* 内边距包含在高度内 */

}
</style>